import React, { useState, useEffect, useCallback, memo } from 'react';
import { PullToRefresh, InfiniteScroll, Card, Tag } from 'antd-mobile';
import styles from './Charts.module.scss';
import { getArticleListAPI } from '@/apis/article';
import NoAvatar from '@/assets/NoAvatar.png'
import { useNavigate } from 'react-router-dom';

const App = () => {
  const navigate = useNavigate();
  const [refreshing, setRefreshing] = useState(false);
  const [hasMore, setHasMore] = useState(true);

  const [list, setList] = useState([]);
  const [reqData, setReqData] = useState({
    status: '',
    channel_id: '',
    begin_pubdate: '',
    end_pubdate: '',
    page: 1,
    per_page: 10
  });

  const updateHasMore = useCallback((results) => {
    setHasMore(results.length >= 10);
  }, []);

  useEffect(() => {
    const getList = async () => {
      const res = await getArticleListAPI(reqData);

      setList(prev =>
        reqData.page === 1 ? res.data.results : [...prev, ...res.data.results]
      );

      if (reqData.page === 1) {
        setRefreshing(false);
      }

      updateHasMore(res.data.results);
    };

    setHasMore(false);
    getList();
  }, [reqData, updateHasMore]);

  const handleRefresh = useCallback(async () => {
    setRefreshing(true);
    setReqData(prev => ({ ...prev, page: 1 }));
  }, []);

  const loadMore = useCallback(async () => {
    if (reqData.page === 1 && list.length < 10) return;
    setHasMore(false);
    setReqData(prev => ({ ...prev, page: prev.page + 1 }));
  }, [reqData.page, list.length]);

  // 定义状态枚举
  const status = {
    1: {
      color: 'warning',
      text: '待审核'
    },
    2: {
      color: 'success',
      text: '审核通过'
    }
  }

  const ArticleCard = memo(({ item }) => {

    const handleClick = (item) => {
      navigate(`/detail/${item.id}`);
    };

    return (
      <Card key={item.id} className={styles.card} onClick={() => handleClick(item)}>
        <div className={styles.cardContent}>
          <img
            src={item.cover.images[0] || NoAvatar}
            alt=""
            className={styles.cardImage}
          />
          <div className={styles.cardText}>
            <div style={{ display: 'flex', justifyContent: 'space-between' }}>
              <div className={styles.cardTitle}>{item.title}</div>
              <Tag className={styles.statusTag} color={status[item.status].color}>
                {status[item.status].text}
              </Tag>
            </div>
            <div className={styles.cardDate}>{item.pubdate}</div>
          </div>
        </div>
      </Card>
    )
  });


  return (
    <div className={styles.container}>
      <PullToRefresh
        refreshing={refreshing}
        onRefresh={handleRefresh}
        className={styles['pull-to-refresh-container']}
      >
        <div className={styles['scroll-container']}>
          {list.map((item) => (
            <ArticleCard key={item.id} item={item} />
          ))}
          <InfiniteScroll loadMore={loadMore} hasMore={hasMore} />
        </div>
      </PullToRefresh>
    </div>
  );
};

export default App;
